<template>
	<view class="pageAll">
		<view class="pageTop">
			<view class="telInput">
				<input type="text" v-model="name" placeholder-style="color:#b57979;" placeholder="请输入新的昵称" />
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" @click="submit" hover-class="subActive">
				完&nbsp&nbsp成
			</button>
		</view>
		<myToast :toastVisible="toastVisible" :tipMess="tipMess" />
		<logo class="Bottomlogo"></logo>
	</view>
</template>

<script>
	import logo from '../../../components/logo/bottomLogo.vue'
	import myToast from '../../../components/message/myToast.vue'
	let interval = null
	export default {
		data() {
			return {
				tipMess: '',
				toastVisible: false,
				name: '',
			}
		},
		methods: {
			submit() {
				if (!this.name) {
					uni.showToast({
						title: '昵称不能为空',
						duration: 2000,
						icon: 'none',
					});
				} else {
					this.$api.updateUsername({
						username: this.name
					}).then(res => {
						if (res.status) {
							this.toastVisible = true
							this.tipMess = '昵称更改成功'

							this.$api.getUserMessage({})
								.then(res => {
									if (res.status) {
										this.$store.commit('setUserInfo', res.data)
									}
								})

							setTimeout(() => {
								uni.navigateBack({

								})
								this.toastVisible = false
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500,
							})
						}
					})
				}
			}
		},
		components: {
			myToast,
			logo,
		},
		onLoad(option) {
			this.name = option.name
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.pageTop {}

	.pageTop view {
		height: 100upx;
		border-radius: 15upx;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		margin-bottom: 15upx;
		font-size: 32upx;
		color: #b57979;
	}

	.telInput input {
		height: 100upx;
		background-color: #FFF;
		padding: 0 15upx;
		border-radius: 15upx;
	}

	.verifica {
		display: flex;
		flex-wrap: nowrap;
	}

	.verifica input {
		height: 100upx;
		background-color: #FFF;
		padding: 0 15upx;
		border-bottom-left-radius: 15upx;
		border-top-left-radius: 15upx;
		width: 65%
	}

	.verifica button {
		height: 100upx;
		background-color: #FFF;
		border-bottom-right-radius: 15upx !important;
		border-top-right-radius: 15upx !important;
		width: 35%;
		color: #FFF;
		font-size: 36upx;
		background-color: #f7533e;
		border-radius: 0;
		padding: 0;
	}

	.verifica button:after {
		border: none;
	}

	.bottomBtnView {
		margin-top: 200upx;
	}

	.bottomBtn {
		color: #FFF;
		font-size: 36upx;
		background-color: #f7533e;
		font-weight: 200;
	}

	.bottomBtn:after {
		border: none;
	}

	.subActive {
		background-color: #FF0000 !important;
	}
</style>
